<!DOCTYPE html>
<html lang="zh-cn">
 
<head>
    <meta charset="utf-8">
	<base href="../../">
	<title>业务表管理 - Powered By jiadao</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10" />
	<meta http-equiv="Expires" content="0"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Cache-Control" content="no-store">
	<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
	<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />

	<link href="css/jquery.dataTables.min.css" type="text/css" rel="stylesheet" />
	<script src="js/jquery.dataTables.min.js" type="text/javascript"></script> 
	
	<script src="js/Sortable.js" type="text/javascript"></script>
	<script src="js/common.js" type="text/javascript"></script>
	<script src="js/vue.js"></script>

</head>
<body>

		<div id="app">
			
			<div class="container">
		
			<form id="inputForm" class="form-inline" action="/db/createTable" method="post" onsubmit="return false;">
				<input id="id" name="id" type="hidden" value="aef6f1fc948f4c9ab1c1b780bc471cc2"/>
				

				<fieldset>
					<legend>数据库表基本信息</legend>
					
					<div class="form-group">
						<label class="control-label">表名:</label>
						<div class="controls">
							<input id="table_name" v-model="name"  placeholder="数据库表名" class=" form-control required"  type="text" maxlength="200"/>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label">备注:</label>
						<div class="controls">
							<input v-model="nameCN"  placeholder="中文名" class=" form-control required" type="text"  maxlength="200"/>
						</div>
					</div>
					<legend>字段列表</legend>
					<div class="control-group">

						<table id="table_table" class="table table-striped table-bordered table-condensed">
							<thead>
							<tr>
								<th title=""><input type="checkbox"/></th>
								<th title="数据库中文字段名">列名</th>
								<th title="数据库英文字段名">中文名</th>
								<th title="字段类型">字段类型</th>
								<th title="字段长度">字段长度</th>
								<th title="是否是数据库主键">主键</th>
								<th title="是否是数据库索引">索引</th>
								<th title="字段是否可为空值，不可为空字段自动进行空值验证">可空</th>
								<!-- <th title="选中后该字段被加入到insert语句里">插入</th>
								<th title="选中后该字段被加入到update语句里">编辑</th>
								<th title="选中后该字段被加入到查询列表里">列表</th>
								<th title="选中后该字段被加入到查询条件里">查询条件</th>
								<th title="该字段为查询字段时的查询匹配方式">查询匹配方式</th>
								<th title="字段在表单中显示的类型">显示表单类型</th>
								<th title="显示表单类型设置为“下拉框、复选框、点选框”时，需设置字典的类型">字典类型</th>
								<th>排序</th> -->
							</tr>
							</thead>
							<tbody>


							<tr v-for=" (item, index) in columns">
									<td>
										<input type="checkbox" v-model="columns[index].selected" />
									</td>
									<td>
										<input type="text" :name="'columnList['+index+'].name'" v-model="item.name" maxlength="200" class="required" style="width:75px;"/>
									</td>
									<td nowrap>
										<input type="text" :name="'columnList['+index+'].nameCN'" v-model="item.nameCN"  maxlength="200" class="required" style="width:75px;"/>
									</td>
									<td>
										<select   v-model="item.type" class="required input-mini" style="width:140px;*width:140px">
												<option value="int" selected title="">int数字</option>
												<option value="varchar"  title="">varchar字符串</option>
												<option value="date"  title="">date日期</option>
												<option value="datetime"  title="">datetime</option>
										</select>
									</td>
									<td>
										<input type="text"  v-model="item.length"  value="10" maxlength="5" class="required input-small"  style="width:75px;"/>
									</td>
									<td>
										<input type="checkbox"   v-model="item.pk"  value="1"/>
									</td>
									<td>
										<!-- <input type="checkbox" name="index"  v-model="columns[index].index"  value="1"/> -->
										<select name="column_type" v-model="item.index" class="required input-mini" style="width:100px;*width:100px">
											<option value="" selected title="">无</option>
											<option value="normal"  title="">普通索引</option>
											<option value="unique"  title="">唯一索引</option>
										</select>
									</td>
									<td>
										<input type="checkbox" name="nullable"  v-model="item.nullable"  value="1" />
									</td>
									<!-- <td>
										<input type="checkbox" name="isInsert"  v-model="columns[index].insertable"  value="1" />
									</td>
									<td>
										<input type="checkbox" name="isEdit"  v-model="columns[index].editable"  value="1" />
									</td>
									<td>
										<input type="checkbox" name="isList"  v-model="columns[index].listable"  value="1" />
									</td>

									<td>
										<input type="checkbox" name="isQuery"  v-model="columns[index].queryable"  value="1" />
									</td>
									<td>
										<select name="queryType"  v-model="columns[index].queryType"  class="required input-mini">
											
												<option value="=" selected title="">=</option>
											
												<option value="!="  title="">!=</option>
											
												<option value="&gt;"  title="">&gt;</option>
											
												<option value="&gt;="  title="">&gt;=</option>
											
												<option value="&lt;"  title="">&lt;</option>
											
												<option value="&lt;="  title="">&lt;=</option>
											
												<option value="between"  title="">Between</option>
											
												<option value="like"  title="">Like</option>
											
												<option value="left_like"  title="">Left Like</option>
											
												<option value="right_like"  title="">Right Like</option>
											
										</select>
									</td>
									<td>
										<select name="formType"  v-model="columns[index].formType"  class="required" style="width:100px;">
											
												<option value="input" selected title="">单行文本</option>
											
												<option value="textarea"  title="">多行文本</option>
											
												<option value="select"  title="">下拉选项</option>
											
												<option value="radiobox"  title="">单选按钮</option>
											
												<option value="checkbox"  title="">复选框</option>
											
												<option value="dateselect"  title="">日期选择</option>
											
												<option value="userselect"  title="">人员选择</option>
											
												<option value="officeselect"  title="">部门选择</option>
											
												<option value="areaselect"  title="">区域选择</option>
											
												<option value="treeselect"  title="">树选择控件</option>
											
												<option value="fileselect"  title="">文件上传选择</option>
											
										</select>
									</td>
									<td>
										<input type="text"  name="dict"  v-model="columns[index].dict"  value="" maxlength="80" class="input-mini"/>
									</td>
									<td>
										<input type="text" name="sort"   v-model="columns[index].sort"  value="1" maxlength="20" class="required input-min digits"/>
									</td> -->
								</tr>
							
							</tr>
							</tbody>
						</table>
					</div>
				</fieldset>
				<div class="form-actions">
					<input id="btnAdd"  @click="addRow"  class="btn btn-primary" type="button" value="增加一行"/>&nbsp;
					<input id="btnDelete"  @click="deleteRow"  class="btn btn-danger" type="button" value="删除选中行"/>&nbsp;
					<input id="btnSubmit" @click="createTable" class="btn btn-primary" type="button"  value="保 存"/>&nbsp;
					<!-- <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/> -->
				</div>
			</form>
			</div>
		</div>
</body>

<script type="text/javascript">
	var index = 0;
	console.log('----111---')
	var tableData ={
		
		name:'',
		nameCN:'',
		columns: [
			{name:'id',selected:false,nameCN:'编号',comment:'编号',length:10,type:'int', pk:true,index:"",nullable:false,insertable:false,listable:true,sort:1},
			{name:'name',nameCN:'名称',comment:'名称',length:30,type:'varchar',index:"",insertable:true,editable:true,listable:true,queryable:true,queryType:'=',formType:'input',sort:2}
		]
	}
	var app = new Vue({
		el: '#app',
		data: tableData,

		mounted:function(){
			console.log('========')
			tableName = getUrlParam("name")
			if( typeof tableName != "undefined" && tableName != null ){
				
				$.ajax({
					type:"post",
					url:"table/getTable",
					data:{tableName:tableName},
					success:function(ret){
						tableData.name = tableName
						console.log(ret)
						if(ret.code == CODE_SUCCESS){
							$.extend(tableData,ret.data)
							setTimeout("$('form :input').attr('disabled','disabled')",600)
							
						}
					}
				})
			}
			
		},
		methods:{
			addRow:function() {
				index = index+1
				var newRow = {}
				newRow.name = 'field'+index
				newRow.nameCN = '字段'+index,
				newRow.type = 'int'
				newRow.length = '10'
				newRow.pk = false
				newRow.index = false
				newRow.nullable = true
				newRow.insertable = true
				newRow.editable = true
				newRow.listable = true
				newRow.queryable = true
				newRow.queryType = '='
				newRow.formType = 'input'
				newRow.selected=false
				newRow.sort = 3
				newRow.dict = ''


				app.columns.push(newRow)
			},
			deleteRow:function() {
				for (var i = app.columns.length - 1; i >= 0; i--) {
					if (app.columns[i].selected) {
						app.columns.splice(i, 1);
					}
				}
			},
			createTable:function()  {
				if(tableData.name==""){
					alert("请填写表名")
					return
				}
				if(tableData.columns.length<2){
					alert("至少要有两个字段")
					return
				}
				$.ajax({
					type:'post',
					url:'table/createTable',
					data:JSON.stringify(tableData),
					contentType:"application/json;charset=UTF-8",
					success:function(ret){
						console.log(ret);
						if(ret.code==CODE_SUCCESS){
							app.id = ret.data;
							alert('创建成功')
						}
						else{
							alert('创建失败：'+ret.msg)
						}
					},
					error:function () {
						alert('发生错误：')
					}
				});
			}
		}
	})
</script>
</html>